<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改图书</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/dayjs.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <style type="text/css">
        #root{
            width: 100%;
        }
        .all{
            width: 70%;
            margin: 0 auto;
        }
        .all .table{
            width: 100%;
        }
        .all .table .title{
            height: 100px;
            text-align: center;
            font-size: 25px;
            font-weight: 600;
            background-color: lightgreen;
        }
        .all .table tr th{
            width: 10%;
        }
        .desc{
            width: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="all">
        <table class="table" border="1">
            <tr>
                <th colspan="2" class="title">
                    更新电子图书
                </th>
            </tr>
            <tr>
                <th>图书名称<span style="color: red">(*)</span></th>
                <td>
                    <input type="text" v-model="book.title">
                </td>
            </tr>
            <tr>
                <th>图书分类<span style="color: red">(*)</span></th>
                <td>
                    <select ref="type">
                        <option :value="obj.id"
                                v-for="(obj,index) in categoryList" :key="obj.id"
                                v-if="book.categoryId==obj.id" selected>{{obj.name}}</option>
                        <option :value="obj.id"
                                v-for="(obj,index) in categoryList"
                                :key="obj.id"
                                v-if="book.categoryId !==obj.id">{{obj.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>图书摘要</th>
                <td>
                    <textarea class="desc" name="desc" v-model="book.summary"></textarea>
                </td>
            </tr>
            <tr>
                <th>上传人</th>
                <td>
                    <input type="text" v-model="book.uploaduser">
                </td>
            </tr>
            <tr>
                <th>上传时间<span style="color: red">(*)</span></th>
                <td>
                    <input type="date" v-model="book.reqDate">
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <button type="button" @click="submitHandler">提交</button>
                    <button type="button" @click="goback">返回</button>
                </th>
            </tr>
            <tr v-if="msg">
                <th colspan="2" v-html="msg"></th>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data(){
            return {
                book : {
                    categoryId : 0,
                    title : '',
                    summary : '',
                    uploaduser : '',
                    reqDate : ''
                },
                categoryList : [],
                msg : ''
            }
        },
        mounted(){
            this.init();
            this.getBook();
            this.msg = '';
        },
        methods : {
            // 初始化加载分类
            async init(){
                let resp = await axios.get('/bookManagerSys/category/list');
                let result = resp.data;
                if(result.code === 200){
                    this.categoryList = result.data;
                }else{
                    alert(result.msg);
                }
            },
            async getBook(){
                let search = location.search;
                let id = search.charAt(search.length - 1);
                let resp = await axios.get('/bookManagerSys/book/preupdate?id=' + id);
                let result = resp.data;
                if(result.code === 200){
                    this.book = result.data;
                }else{
                    alert(result.msg);
                }
            },
            // 提交回调
            async submitHandler(){
                const {title, summary, uploaduser, reqDate} = this.book;
                if(title === ''){
                    this.msg = '<span style="color: red">图书名称不能为空</span>';
                }else if(summary === ''){
                    this.msg = '<span style="color: red">图书摘要不能为空</span>';
                }else if(uploaduser === ''){
                    this.msg = '<span style="color: red">上传人不能为空</span>';
                }else if(reqDate === ''){
                    this.msg = '<span style="color: red">上传时间不能为空</span>';
                }else{
                    let resp = await axios.post('/bookManagerSys/book/add',this.book);
                    let result = resp.data;
                    if(result.code === 200){
                        this.msg = '<span style="color: green">'+result.msg+'</span>';
                        this.book = {};
                        location.href = "index.html";
                    }else{
                        this.msg = '<span style="color: red">'+result.msg+'</span>';
                    }
                }
            },

            goback(){
                history.back();
            }
        }
    })
</script>
</body>
</html>